<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>拾年之璐图床</title>
    <link rel="shortcut icon " type="images/x-icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>

    <!-- 引用来自网络的静态资源 -->
    <!--        <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">-->
    <!--        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>-->
    <!--        <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>-->
    <!--        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <!--        <script type="text/javascript" src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>-->

    <!-- 引用本地的静态资源 -->
    <link rel="stylesheet" type="text/css" href="css/iview.css">
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/vue-clipboard.min.js"></script>
    <script type="text/javascript" src="js/iview.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/qiniu.min.js"></script>

</head>

<body>
<div id="app" i-col="24">
    <p class="title">拾年之璐图床</p>

    <div class="upload-borad">
        <div class="demo-spin-container" v-show="loading">
            <Spin fix></Spin>
        </div>

        <Upload
                class="Upload"
                multiple="true"
                :show-upload-list="showUploadList"
                type="drag"
                :before-upload="beforeUpload"
                :on-progress="onProgress"
                :on-success="onSuccess"
                :on-error="onError"
                :data="{token: token}"
                action="https://upload.qiniup.com">
            <!-- TODO 注意修改上面的action URL -->

            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击选择文件或者将文件拖入此处</p>
            </div>
        </Upload>

        <ul class="ivu-upload-list hoverbox" style="vertical-align: middle">
            <li class="ivu-upload-list-file ivu-upload-list-file-finish" v-for="item in arry">
                <span>
                    <i class="ivu-icon ivu-icon-ios-image"></i>
                    <a v-bind:href="item" target="_blank">
                        　{{item}}　
                        <img v-bind:src="item" class="preview">
                    </a>
                </span>

                <span @click="copyURL(item)">　复制链接　</span>
                <span @click="copyMdURL('!['+item+']('+item+')')">　复制Markdown格式　</span>
            </li>
        </ul>
    </div>
</div>
<div class="footer">
    <p class="footer">
        <a href="https://github.com/mqllin/QiNiuYun_UploadImage_tuchuang" target="_blank">原作者：mqllin</a>
        <a href="http://beian.miit.gov.cn/" target="_blank">　鲁ICP备18018164号-3　</a>
        本图床为自用图床，资源可能随时清除。
    </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            visible: false,
            domain: '',
            protocol: '',
            token: '',
            loading: true,
            showUploadList: false,
            arry: []

        },
        mounted() {
            this.init()
        },
        methods: {
            init: function () {
                let that = this;
                axios.get('/server/upload.php')
                    .then(function (res) {
                        that.token = res.data.up_token;
                        that.domain = res.data.domain;
                        that.protocol = res.data.protocol;

                        that.$Notice.success({
                            title: '初始化成功',
                            desc: ''
                        });
                        that.loading = false
                    })
                    .catch(function (error) {
                        // console.log(error);
                    })
            },
            show: function () {
                this.visible = true;
            },
            beforeUpload: function (file) {
                // console.log('file', file);
                return file.name = '/tuchuang/' + file.name
            },
            onProgress: function (event, file, fileList) {
                // console.log(event, file, fileList)
            },
            onSuccess: function (response, file, fileList) {
                // console.log('上传成功', response, file, fileList)
                this.$Notice.success({
                    title: '上传成功',
                    desc: ''
                });
                this.arry.push(this.protocol + "://" + this.domain + '/' + response.key)
            },
            onError: function (error, file, fileList) {
                // console.log('上传失败', error, file, fileList)
                this.$Notice.error({
                    title: '上传失败',
                    desc: error
                });
            },
            copyURL: function (e) {
                this.$copyText(e);
                this.$Notice.success({
                    title: '链接复制成功！',
                    desc: e.substr(0, 30) + '...',
                });
            },
            copyMdURL: function (e) {
                this.$copyText(e);
                this.$Notice.success({
                    title: 'Markdown链接复制成功！',
                    desc: e.substr(0, 30) + '...',
                });
            }
        }
    })
</script>
<style>
    #app {
        width: 100%;
        text-align: center;
        padding: 28px;
        box-sizing: border-box;
        margin: auto 0;
    }

    .title {
        font-size: 24px;
        margin-top: 28px;
        margin-bottom: 28px;

    }

    .upload-borad {
        width: 85%;
        max-width: 960px;
        margin: 0 auto;
        position: relative;
    }

    .Upload {
        width: 100%;
        text-align: left;
    }

    .ivu-upload-list {
        width: 100%;


    }

    .ivu-icon {
        margin-right: 0px;
    }

    .footer {
        font-size: 10pt;
        color: #9ea7b4;
        position: fixed;
        bottom: 0;
        line-height: 25px;
        height: 25px;
        width: 100%;
        text-align: center;
        padding: 0;
    }

    .demo-spin-container {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid #eee;
        z-index: 2000;
    }

    .ivu-upload-list-file-finish {
        border: 3px white solid;
        background-color: #fafafa;
    }

    .hoverbox a .preview {
        display: none;
    }

    .hoverbox a:hover .preview {
        display: block;
        position: fixed;
        width: 450px;
        height: 450px;
        z-index: 1;
    }


</style>
</body>
</html>